<?php if (!defined('THINK_PATH')) exit();?><script type="text/javascript">
	//保存链接code，刷新直接加载到该页面
  localStorage.setItem("user_url","<?php echo ($code); ?>");
</script>

<link rel="stylesheet" href="/Public/3rd/upload/css/diyUpload.css">
<link rel="stylesheet" href="/Public/3rd/upload/css/webuploader.css">
<link rel="stylesheet" href="/Public/3rd/dropzone/dropzone.css">





<link rel="stylesheet" href="/Public/3rd/artdialog/skins/aero.css">
<script src="/Public/3rd/artdialog/artDialog.js"></script>
<script src="/Public/3rd/artdialog/plugins/iframeTools.js"></script>
<script src="/Public/3rd/artdialog/common_opfun.js"></script>
<script type="text/javascript">
function dialog_loading(msg){
	var dialog = art.dialog({
    content: msg,
    icon: 'loading',
    opacity: 0.3,
	lock:true,
})
}

function dialog_success(msg){
	var dialog = art.dialog({
    content: msg,
    icon: 'succeed',
    opacity: 0.3,
	lock:true,
	ok:function(){

	}
})
}


function dialog_error(msg){
	var dialog = art.dialog({
    content: msg,
    icon: 'error',
    opacity: 0.3,
	ok:function(){

	}
})
}
// 	function  dialog_close(){
// 	var dialog = art.dialog({
//       close,
// 	})
// }
</script>

<style>
.user_center_page{
    min-height: 800px;
    padding: 24px 16px 0 16px;
}
.aui_main{
    vertical-align: top;
    text-align: left;
}
    .aui_main .aui_content{
        padding: 0 !important;
        width:100%;
        height:100%;
        border-bottom: 1px solid #eee;
    }

    ul.album_list{

    }
    ul.album_list li>img{
        width:200px;
        height:215px;
        float:left;
        margin:12px;
    }
    .photo_page_header .btn-group{
        margin-left: 40px;
    }
        .photo_page_header .btn-group .btn{
            margin-left: 12px;
        }
    .photo_page_body{
        margin-top: 12px;
    }
.setup-album{
    width:100%;
    height:42px;
}
    .setup-album .album_sel_img{
        width: 40px;
        height: 37px;
        border-radius: 4px;
        margin: 2px 12px 3px 6px;



    }


    .setup-album ul{
        padding:2px 6px 12px;
        background-color: #ebebeb;
    }

        .setup-album ul li{
            width:228px;
            border-bottom:1px dotted grey;

        }
        /*.setup-album ul li:first-child{*/
            /*border-bottom:1px dotted grey;*/
        /*}*/
        .setup-album ul .album_sel_img{
            margin:4px 12px 4px 1px;

        }
        .setup-album ul li:hover{
            background-color: #f9f9f9;
        }

.from-group{
    margin-top: 24px;
}
.form-control{
    width:70%
}
div.error_tip{
    height:28px;
    line-height: 28px;
    font-size: 12px;
    color: orange;
    background: url('/Public/home/img/error.png') no-repeat 122px center;
    padding-left: 142px;
}
.dropzone{
    padding:16px 14px;
}

.dropzone .dz-preview .dz-remove{
    background: #eee;
    margin-top: 2px;
}

.dropzone .dz-preview .dz-image{
    border-radius: 0
}


</style>

<div id="photoPageContainer" class="col-sm-12 user_center_page">
    <div class="row">
        <div class="photo_page_header col-sm-12" style="width:1000px;">
                <div class="btn-group">
                    <button class="btn btn-default" onclick="photo_dialog('photoDialog')">上传照片</button>
                    <!--<button class="btn btn-default" onclick="_es_openDilog100('photoDialog')">上传照片</button>-->
                    <button class="btn btn-default" onclick="album_dialog('albumDialog')">创建相册</button>
                    <button class="btn btn-default">展示设置</button>
                </div>


        </div>

        <div class="photo_page_body col-sm-12">
            <div class="row">
                <div class="photo_page_content col-sm-12">
                    <ul class="album_list" id="album_list">


                    </ul>
                </div>


            </div>
        </div>
    </div>

    <!--上传照片弹出框-->
    <div id="photoDialog" style="display: none" class="img_upload" >
        <div style="width: 100%;height:100%">
            <div id="setup-album" class="setup-album" style="position: relative;width:100%">
                <div style="height:42px;background-image: -webkit-linear-gradient(top,#fafafa,#ebebeb);">
                    <span style="line-height: 42px;height:42px;display: inline-block;padding-left: 12px;">上传到</span>

                    <div id="selAlbumBtn" style="display: inline-block;width: 240px;background-color: #f9f9f9;border:1px solid #ddd;height: 42px;position: relative;top: -1px;">
                        <img style="" class="album_sel_img" src="" alt="">
                        <span class="album_name" style="display: inline-block">相册一</span>
                        <span style="color:darkgray;display: inline-block;top: 10px;margin-right: 4px;float:right" class="glyphicon glyphicon-chevron-down"></span>
                    </div>

                </div>
                <ul id="sel_albums" style="display: none;position: absolute;top:42px;left:61px;z-index:100">
                    <!--<li>-->
                        <!--<img class="album_sel_img" src="/xuexi/Public/upload/20161127/583abdc513ab6_thumb.jpg" alt="">-->
                        <!--<span class="album_name">相册一</span>-->
                    <!--</li>-->


                </ul>

            </div>




            <div id="uploadContent" style="height:auto;padding:12px">
                  <!--dropzone测试-->
                <div class="col-sm-12" id="dropZoneContent">

                   <form action="" class="dropzone" id="test-dropzone">

                   </form>
               </div>

            </div>
            <button class="btn btn-default" style="margin: 12px 27px 12px 24px;float:right" onclick="uploadSure()">确认上传</button>
            <div id="btnContainer" style="height:60px;position:absolute;left:32px; bottom: -6px">

            </div>
        </div>
    </div>
    <!--创建相册弹出框-->
    <div id="albumDialog" style="display: none;height:100%;border-bottom:1px solid #ddd">
        <form class="form-horizontal col-xs-12" id="" role="form" style="padding:60px 40px 0 30px; ">
            <div class="from-group">
                <label class="col-sm-3 control-label" for="album_name" >相册名称</label>
                <input type="text" class="form-control" id="album_name" placeholder="请输入相册名称" name="album_name">
            </div>
            <div class="error_tip hide">
                相册名称不能为空，请先输入名称
            </div>
             <div class="from-group">
                <label class="col-sm-3 control-label" for="album_name" >排序</label>
                <input type="number" min="0" class="form-control" id="sort" value="0" name="sort">
            </div>
            <div class="from-group">
                <label class="col-sm-3 control-label" for="album_descr">相册描述</label>
                <textarea type="text" class="form-control" rows="3"  id="album_descr"  placeholder="请输入相册故事或描述(非必填)" name="album_name"></textarea>
            </div>

        </form>
    </div>
    <!--浏览图片弹出框-->






</div>


<script src="/Public/3rd/upload/js/diyUpload.js"></script>
<script src="/Public/3rd/upload/js/webuploader.html5only.min.js"></script>

<script src="/Public/3rd/dropzone/dropzone.js"></script>




<script>
    localStorage.setItem("user_url","<?php echo ($code); ?>");
    // Dropzone.options.myAwesomeDropzone = false;
    $(function(){
         Dropzone.options.myAwesomeDropzone = false;
//        相册列表
        var albumList =[];
        showAlbumList();
        var myDropzone;
        // var myDropzone = new Dropzone("form", { url: "<?php echo U('Usercenter/upload_img');?>"});

    })

    var uploadPhotoArr = [];

//    获取相册列表
    function  showAlbumList(){
        $.ajax({
            url:"<?php echo U('Usercenter/sel_photo');?>",
            type:'get',
            dataType:'json',
            data:{
                page:1,
                pagesize:8
            },
            success:function(data){
                debugger;
                albumList = data.list;
                if(albumList.length>0) {
                    for (var i = 0; i < albumList.length; i++) {
                        $("#album_list").append('<li><img p_u_id="' + albumList[i].u_id + '" p_id="' + albumList[i].id + '" p_name="' + albumList[i].name + '" p_sort="' + albumList[i].sort + '" src="/public/' + albumList[i].img + '" alt="' + albumList[i].name + '"></li>');
                    }
                    $("#album_list").find('li').on("click",function(){

                          var album_id = $(this).find('img').attr('p_id');
                          var url = "<?php echo U('Usercenter/sel_photo_img');?>";
                          debugger;
                          $.ajax({
                            url:url,
                            type:"post",
                            dataType:"json",
                            data:{
                                type_id:album_id
                            },
                            success:function(data){
                                debugger;
                            }




                          })




                    })
                }
                // toggleLoadingFlash();
            }
        })
    }

    //    上传照片弹出框配置
    function photo_dialog(msg){
        var dialog = art.dialog({
            title:"上传照片",
            width:'1000px',
            content:document.getElementById(msg),
            height:'80%',
            opacity: 0.2,
            drag:false,
            // padding:0,
            background:'#000',

            lock:true,
            init: function(){
                // initUploadPage();
                initNewUploadPage();

            },
            ok:function(){
                confirmUpload();
            },
            okVal:'完成',
            cancelVal: "取消",
            cancel: function(){
//                有待上传的图片id时 友情提示一下
                if(uploadPhotoArr.length>0){
                    var b = art.dialog({
                        content: '确认关闭页面将会取消上传图片',
                        title:'提示',
                        ok: function () {
                            dialog.close();
                        },
                        cancelVal: '取消',
                        cancel: true //为true等价于function(){}
                    });
                    return false;
                }
                return true;

            },
            close:true
        })
    }


    //    创建相册 弹出框配置
    function album_dialog(msg){
        var dialog = art.dialog({
            title:"创建相册",
            width:'500px',
            content:document.getElementById(msg),
            height:'70%',
            opacity: 0.2,
            drag:false,
            background:'#000',
            lock:true,
            init: function(){
            },
            ok:function(){
                   return validateAlbumForm()
            },
            okVal:'确定',
            cancelVal: "取消",
            cancel: function(){
                this.close();
            }
        })
    }

//    验证和提交创建相册表单
    function validateAlbumForm(){

        if($.trim($("#album_name").val())===""){
            $('div.error_tip').removeClass('hide');
            return false;
        }else {
            var album_name = $.trim($("#album_name").val());
            var album_descr = $.trim($("#album_descr").val());
            var sort = $.trim($("#sort").val());
            $.ajax({
                url:"<?php echo U('Usercenter/add_photo');?>",
                type:'post',
                data:{'name':album_name,'content':album_descr,'sort':sort},
                dataType:'json',
                success:function(data){
                    if(data.state ==1){
                        alert(data.msg);
                    }else{
                        alert(data.msg);
                    }
                },
                error:function(xhr){
                    alert('网络错误');

                }

            })
        }
    }

    function initNewUploadPage(){
        var selAlbumBtnObj = $("#selAlbumBtn");
        selAlbumBtnObj.attr("sel_album_id",albumList[0].id);
        selAlbumBtnObj.find('span.album_name').text(albumList[0].name);
        $("#sel_albums").empty();
        for(var i=0;i<albumList.length;i++){
            $("#sel_albums").append(' <li> <img class="album_sel_img" p_u_id="' + albumList[i].u_id + '" p_id="' + albumList[i].id + '" p_name="' + albumList[i].name + '" p_sort="' + albumList[i].sort + '" src="/xuexi/public/' + albumList[i].img + '" alt="' + albumList[i].name + '"><span class="album_name">'+albumList[i].name+'</span> </li>');
        }

        selAlbumBtnObj.off("click").on("click",function(){
            debugger;
            $("#sel_albums").toggle();
            $("body").bind("mousedown", onBodyMouseDown);
        })
        $("#sel_albums li").off("click").on("click",function(){
            debugger;
            var g = $(this);
//                    obj2 = g;
            var obj1 = selAlbumBtnObj;
            var name = g.find('span.album_name').text();
            var src = g.find('img').attr('src');
            var album_id = g.find('img').attr('p_id');
            obj1.find('span.album_name').text(name);
            obj1.find('img').attr('src',src);
            obj1.attr("sel_album_id",album_id);
            $("#sel_albums").css("display","none");
            $("body").unbind("mousedown", onBodyMouseDown);
        })
        // dropZoneContent
        var options = {
            url:Think.APP+'/Usercenter/photo_add_img2',
            dictDefaultMessage:"点击或者将图片拖放到这里上传",
            autoProcessQueue:false,
            parallelUploads:20,
            dictResponseError: 'Error while uploading file!',
            addRemoveLinks:true,
            dictRemoveFile:"删除",
            dictCancelUpload:"取消",
            dictFileTooBig:"图片大小超过限制",
            dictCancelUploadConfirmation:'取消',
            dictInvalidFileType:"不支持上传该类型的文件",
            acceptedFiles:".jpg,.png,.gif,.bmp,.jpeg"

        };
// acceptedFiles:["image/*"]
        myDropzone = new Dropzone("#test-dropzone",options);
        myDropzone.on("error",function(a,b,c){
            debugger;
           a.previewElement.getElementsByClassName("dz-error-message")[0].getElementsByTagName("span")[0].innerText = "上传失败"
        });
        myDropzone.on("queuecomplete", function(file,a) {
            debugger;
            // var a = myDropzone.getRejectedFiles();
            var files =  myDropzone.getAcceptedFiles();
            // if()
            // console.log(a,file);
            for (var i = files.length - 1; i >= 0; i--) {
                if(files[i].status =="success"){
                    setTimeout(

                    myDropzone.removeFile(files[i])

                    ,500)
                }
            }




           // var html =  '<div id="contiue_upload_btn" style="display: inline-block;cursor:pointer;margin: 20px 11px;padding: 12px;background: #ddd; width: 120px; height: 130px;"><img class="contiue"  src="/Public/home/img/add_con.png" style="width:88px;cursor:pointer;" alt=""><p style="color:#23527c">继续添加图片</p></div>';

           // var form = $("#test-dropzone");
           // $("#contiue_upload_btn").remove();
           // form.append(html);
           // $("#contiue_upload_btn").off("click").on('click',function(event) {
           //     event.preventDefault();

           //     form.trigger('click');
           // });
        });

        myDropzone.on("addedfile", function(file,a) {
           $("#contiue_upload_btn").remove();
           var html =  '<div id="contiue_upload_btn" style="display: inline-block;cursor:pointer;margin: 20px 11px;padding: 12px;background: #ddd; width: 120px; height: 130px;"><img class="contiue"  src="/Public/home/img/add_con.png" style="width:88px;cursor:pointer;" alt=""><p style="color:#23527c">继续添加图片</p></div>';
            var form = $("#test-dropzone");
           // $("#contiue_upload_btn").remove();
           form.append(html);
            $("#contiue_upload_btn").off("click").on('click',function(event) {
               event.preventDefault();

               form.trigger('click');
           });
        });

        myDropzone.on("sending", function(file, xhr, formData) {
           // Will send the filesize along with the file as POST data.
           var album_id = $("#selAlbumBtn").attr("sel_album_id");
           formData.append("type_id", album_id);
        });

         myDropzone.on("removedfile", function(file, a) {
            debugger;
            var fileArr1 = myDropzone.getQueuedFiles();
                 var fileArr2   =  myDropzone.getAcceptedFiles();
            if (fileArr1.length===0 && fileArr2.length===0) {
                $("#contiue_upload_btn").remove();
            }
           // Will send the filesize along with the file as POST data.
           // var album_id = $("#selAlbumBtn").attr("sel_album_id");
           // formData.append("type_id", album_id);
        });

        // $("div#dropZoneContent").dropzone({ url: "/file/post" });






    }





    // jQuery(function($){

    // Dropzone.autoDiscover = false;
    // try {
    //   var myDropzone = new Dropzone("#dropzone" , {
    //     paramName: "file", // The name that will be used to transfer the file
    //     maxFilesize: 0.5, // MB

    //     addRemoveLinks : true,
    //     dictDefaultMessage :
    //     '<span class="bigger-150 bolder"><i class="ace-icon fa fa-caret-right red"></i> Drop files</span> to upload \
    //     <span class="smaller-80 grey">(or click)</span> <br /> \
    //     <i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"></i>'
    // ,
    //     dictResponseError: 'Error while uploading file!',

    //     //change the previewTemplate to use Bootstrap progress bars
    //     previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n    <div class=\"dz-size\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n  <div class=\"progress progress-small progress-striped active\"><div class=\"progress-bar progress-bar-success\" data-dz-uploadprogress></div></div>\n  <div class=\"dz-success-mark\"><span></span></div>\n  <div class=\"dz-error-mark\"><span></span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>"
    //   });
    // } catch(e) {
    //   alert('Dropzone.js does not support older browsers!');
    // }

    // });



    function uploadSure(){

        myDropzone.processQueue()


    }


//    初始化图片上传弹出框内容  绑定一些事件
    function initUploadPage(){
//        sel_albums albumList
        var selAlbumBtnObj = $("#selAlbumBtn");
        selAlbumBtnObj.attr("sel_album_id",albumList[0].id);
        selAlbumBtnObj.find('span.album_name').text(albumList[0].name);
        $("#sel_albums").empty();
        for(var i=0;i<albumList.length;i++){
            $("#sel_albums").append(' <li> <img class="album_sel_img" p_u_id="' + albumList[i].u_id + '" p_id="' + albumList[i].id + '" p_name="' + albumList[i].name + '" p_sort="' + albumList[i].sort + '" src="/xuexi/public/' + albumList[i].img + '" alt="' + albumList[i].name + '"><span class="album_name">'+albumList[i].name+'</span> </li>');
        }

        selAlbumBtnObj.off("click").on("click",function(){
            debugger;
            $("#sel_albums").toggle();
            $("body").bind("mousedown", onBodyMouseDown);
        })
        $("#sel_albums li").off("click").on("click",function(){
            debugger;
            var g = $(this);
//                    obj2 = g;
            var obj1 = selAlbumBtnObj;
            var name = g.find('span.album_name').text();
            var src = g.find('img').attr('src');
            var album_id = g.find('img').attr('p_id');
            obj1.find('span.album_name').text(name);
            obj1.find('img').attr('src',src);
            obj1.attr("sel_album_id",album_id);
            $("#sel_albums").css("display","none");
            $("body").unbind("mousedown", onBodyMouseDown);
        })
        $('#uploadContent').diyUpload({
            url:Think.APP+'/Usercenter/upload_img',
            fileNumLimit : 50,
            fileSizeLimit : 500000 * 1024,
            fileSingleSizeLimit : 50000 * 1024,
            disableGlobalDnd: true,
            success:function( data ) {

                console.info( data );
                uploadPhotoArr.push(data);
            },
            error:function( err ) {
                console.info( err );
            }
        })
    }


//    确认上传图片
    function confirmUpload(){
        debugger;
        var album_id = $("#selAlbumBtn").attr("sel_album_id");
        var photoArr = uploadPhotoArr.join(",");
        if(album_id !=="" && photoArr.length>0){
            $.ajax({
                url:"<?php echo U('Usercenter/photo_add_img2');?>",
                type:"post",
                dataType:"json",
                data:{
                    "type_id":album_id,
                    "img_ids":photoArr
                },
                success:function(data){
                    alert(data.msg);
                },
                error:function(){
                    alert("网络连接错误，上传失败");
                }


            })
        }





    }
    function onBodyMouseDown(event){
        debugger;
        if (!($(event.target).parents("#sel_albums").length>0 || event.target.id == "selAlbumBtn")) {
            $("#sel_albums").css("display","none");
            $("body").unbind("mousedown", onBodyMouseDown);
        }




    }



    //保存
</script>